<template>
  <LoadPage :show="show" />
  <view class="main">
    <nut-sticky>
      <view class="search">
        <nut-searchbar @search="search" placeholder="搜索" v-model="serverQuery.search" background="#f6f6f6"
          input-background="#fff">
          <template #leftin>
            <nut-icon name="search2" />
          </template>
        </nut-searchbar>
      </view>
    </nut-sticky>

    <view class="cate" :style="{ height: newsPanelHeight + 'px' }">
      <view class="cate-list" :style="{ height: newsPanelHeight + 'px' }">
        <scroll-view @scrolltolower="cateScroll" scroll-y="true" class="scroll-Y"
          :style="{ height: newsPanelHeight + 'px' }">
          <view class="cate-item" v-if="cateList.length" :class="{ 'active': current == index }"
            v-for="(item, index) in cateList" @click="selectCate(item, index)">
            <view class="over-1">{{ item.name }}</view>
            <view class="line" v-if="current == index"></view>
          </view>
        </scroll-view>
      </view>
      <view class="product">
        <view class="title" v-if="JSON.stringify(selectCateItem) != '{}' || cateList.length">{{ selectCateItem.name ?
          selectCateItem.name : cateList[0].name }}</view>
        <scroll-view @scrolltolower="serverScroll" scroll-y="true" class="scroll-Y"
          :style="{ height: newsPanelHeight + 'px' }">
          <view class="pro-item dispaly-center" v-for="item in serverList" :key="item.id"
            @click="$goUrl(`/subPackage/server/serverDetail?id=${item.id}`)">
            <view class="cover">
              <image :src="item.image.split(',')[0]" mode="aspectFill" />
            </view>
            <view class="desc dispaly-column-between">
              <view class="top over-2">{{ item.name }}</view>
              <view class="dispaly-center">
                <view class="one-p dispaly-center">
                  <view class="tip dispaly-align-center">优惠价</view>
                  <view class="p">¥{{ item.money.toFixed(2) }}</view>
                </view>
                <view class="two-p">
                  <nut-price :price="item.oldMoney" :decimal-digits="2" :thousands="true" strike-through size="small" />
                </view>
              </view>
            </view>
          </view>
          <LoadMore :status="status" />
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onReady, onShow } from '@dcloudio/uni-app'
import { getScreenSHeight } from '@/utils/util'
import { getCateList, getServerList } from '@/api/apiList'


// 获取服务类目列表
let cateQuery = reactive({
  pageNum: 1,
  pageSize: 16,
})
const cateList = ref([{ name: '全部', id: '' }])
const getCateListData = async () => {
  return new Promise(async (resolve, reject) => {
    const res = await getCateList(cateQuery)
    if (res.code == 200) {
      if (res.rows.length) {
        cateList.value = [...cateList.value, ...res.rows]
        resolve('ok')
      }
    }
  })
}

// 分类触底分页
const cateScroll = () => {
  cateQuery.pageNum++
  getCateListData()
}

// 获取服务
let serverQuery = reactive({
  pageNum: 1,
  pageSize: 16,
  categoryId: '',
  search: '',
  sort: 'asc',
  sortName: 'sort'
})
const serverList = ref([])
let status = ref('noMore')
const getServerListData = async () => {
  status.value = 'loading';
  return new Promise(async (resolve, reject) => {
    const res = await getServerList(serverQuery)
    if (res.code == 200) {
      if (res.rows.length) {
        serverList.value = [...serverList.value, ...res.rows]
        status.value = 'noMore'
        resolve('ok')
      } else {
        status.value = 'noMore'
      }
      resolve('ok')
    }
  })
}

// 服务触底分页
const serverScroll = () => {
  serverQuery.pageNum++
  getServerListData()
}

// 搜索
const search = () => {
  serverQuery.pageNum = 1
  current.value = 0
  serverList.value = []
  getServerListData()
}


let show = ref(true)
const init = async () => {
  let queue = [getCateListData(), getServerListData()]
  const res = await Promise.all(queue)
  show.value = false
}

let id = ref('')
onLoad((option) => {
  if (option.cId) {
    id.value = option.cId
    switchCate()
  } else {
    init()
  }
})

const switchCate = async () => {
  await getCateListData()
  let index = cateList.value.findIndex(item => item.id == id.value)
  selectCateItem.value = cateList.value[index]
  current.value = index
  serverList.value = []
  serverQuery.categoryId = id.value
  serverQuery.pageNum = 1
  await getServerListData()
  console.log(233)
  show.value = false
}

// 选择分类
const current = ref(0)
const selectCateItem = ref({})
const selectCate = (item, index) => {
  selectCateItem.value = item
  current.value = index
  serverQuery.categoryId = item.id
  serverQuery.pageNum = 1
  serverList.value = []
  getServerListData()
}


// 获取屏幕剩余高度
const newsPanelHeight = ref(0)
onReady(async () => {
  newsPanelHeight.value = await getScreenSHeight(40)
})
</script>
<style lang="scss" scoped>
.active {
  color: #111111 !important;
  background-color: #fff !important;
  border-radius: 0 0 25rpx 0;
}

:deep(.nut-price--strike) {
  color: #999999;
}

.search {
  height: 80rpx;
}

.cate {
  display: flex;
  overflow: hidden;

  .cate-list {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .cate-item {
      background-color: #f6f6f6;
      padding: 32rpx 28rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #444444;
      position: relative;

      .line {
        position: absolute;
        left: 0; //起始是在body中，横向距左50%的位置
        top: 50%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
        transform: translate(-50%, -50%); //水平、垂直都居中,也可以写成下面的方式

        width: 6rpx;
        height: 48rpx;
        background: #FB4E47;
        border-radius: 0rpx 4rpx 4rpx 0rpx;
      }
    }
  }

  .product {
    flex: 4;
    background-color: #fff;
    padding-right: 34rpx;

    .title {
      padding: 32rpx 28rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #111111;
    }

    .scroll-Y {
      padding: 0 28rpx;

      .pro-item:last-child {
        margin-bottom: 0;
      }

      .pro-item {
        height: 170rpx;
        margin-bottom: 60rpx;

        .cover {
          margin-right: 15rpx;

          image {
            width: 170rpx;
            height: 170rpx;
            border-radius: 16rpx;
          }
        }

        .desc {
          height: 190rpx;

          .top {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #111111;
            line-height: 36rpx;
            padding-top: 10rpx;
          }

          .one-p {
            border-radius: 4rpx 4rpx 4rpx 4rpx;
            background: #FBE6C7;
            margin-right: 10rpx;

            .tip {
              background-color: #FB4E47;
              color: #f7e7ca;
              font-size: 22rpx;
              padding: 0 6rpx;
              margin-right: 10rpx;
              border-radius: 4rpx 4rpx 4rpx 4rpx;
            }

            .p {
              padding-right: 10rpx;
              font-size: 20rpx;
            }
          }
        }
      }
    }
  }
}
</style>